<template>
	<view class="box">
		<view class="box1">
			<view class="title">
				<view class="title-left">{{ porps.title }}</view>
				<view class="title-icon" @click="changFN">
					<uni-icons type="top" color="#95a1a6" v-if="show"></uni-icons>
					<uni-icons type="bottom" color="#95a1a6" v-else></uni-icons>
				</view>
			</view>
			<view class="conter-liner-cost">
				<view class="liner-left">{{ porps.text }}&nbsp;&nbsp; 合计：</view>
				<view class="liner-right">{{ porps.cost }}元</view>
			</view>
		</view>
		<view class="box2" v-show="show"><slot></slot></view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
const porps = defineProps({
	title: String,
	text: String,
	cost: String
});
const show = ref(false);

function changFN() {
	show.value = !show.value;
}
</script>

<style lang="scss" scoped>
.box {
	margin: 0;
	padding: 0 25rpx;
	.box1 {
		margin-bottom: 23rpx;
		margin-top: 35rpx;
		.title {
			display: flex;
			justify-content: space-between;
			margin-bottom: 10rpx;

			.title-left {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #2b3133;
			}
		}
		.conter-liner-cost {
			display: flex;
			.liner-left {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #7b7f83;
			}
			.liner-right {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #ff8124;
			}
		}
	}
	.box2 {
		border-top: 1rpx solid #e6e6e6;
	}
}
</style>
